<template>
  <div>
    <a-modal v-model:visible="modalVisible" title="退款耗材信息" width="80%" @cancel="cancle">
      <a-descriptions title="" bordered :column="2">
        <a-descriptions-item label="退款状态">{{ status }}</a-descriptions-item>
        <a-descriptions-item label="订单号">
          {{ order.number }}
          <!-- <a-button type="link">查看</a-button> -->
        </a-descriptions-item>
        <a-descriptions-item label="申请时间">{{ order.createdAt }}</a-descriptions-item>
        <a-descriptions-item label="用户ID">{{ order.userId }}</a-descriptions-item>
        <a-descriptions-item label="耗材名称">{{ order.bagName }}</a-descriptions-item>
        <a-descriptions-item label="购买数量">{{ order.num }}</a-descriptions-item>
        <a-descriptions-item label="耗材明细">
          <div v-for="item in order.list" :key="item.id">
            {{ item.bleName }}
          </div>
        </a-descriptions-item>
        <a-descriptions-item label="支付金额">{{ order.price }}</a-descriptions-item>
        <template v-if="order.endPrice">
          <a-descriptions-item label="实际退款金额">{{ order.endPrice }}</a-descriptions-item>
          <a-descriptions-item label="退款方式">{{ order.way }}</a-descriptions-item>
        </template>
        <a-descriptions-item label="退款原因" v-if="order.text">{{ order.text }}</a-descriptions-item>
        <a-descriptions-item label="拒绝原因" v-if="order.content">{{ order.content }}</a-descriptions-item>
      </a-descriptions>
      <template #footer>
        <div style="padding: 20px 0px">
          <a-row v-if="isEdit">
            <a-col :span="4" :offset="6"><a-button type="primary" @click="confirm">确认退款</a-button></a-col>
            <a-col :span="4" :offset="2"><a-button type="danger" @click="reject">拒绝退款</a-button></a-col>
          </a-row>
          <a-row v-else>
            <a-col :span="4" :offset="8">
              <a-button type="primary" @click="cancle">关闭</a-button>
            </a-col>
          </a-row>
        </div>
      </template>
    </a-modal>
    <!-- 弹窗 -->
    <a-modal v-if="visible1" v-model:visible="visible1" title="拒绝原因" @ok="rejectRefund" width="50%">
      <a-form :model="form" ref="formRef" :rules="rules">
        <a-form-item label="请输入退款原因" name="reason">
          <a-textarea v-model:value="form.reason" placeholder="请输入退款原因" :auto-size="{ minRows: 2, maxRows: 5 }" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import { Modal, message } from 'ant-design-vue'
import { ref, h, reactive, onMounted, toRefs, createVNode,computed } from 'vue'
import { manageRefund, selectOneRefundOrder, confirmRefund } from '@/api/consume/index'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { suppressDeprecationWarnings } from 'moment'
import { useModal } from "@/hooks"

export default {
  components: {
    ExclamationCircleOutlined
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    number: {
      type: Number,
      default: ''
    },
    status: {
      type: String,
      default: ''
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  setup(props, { emit, attrs }) {
    console.log(props, '接收的参数')
    const form = reactive({})
    const formRef = ref('')
    const modalVisible = computed({
      get: () => props.visible,
      set: val => {
        emit('update:visible', val)
      }
    })
    const data = reactive({
      order: {},
      visible1: false
    })
    const rules = {
      reason: [
        {
          required: true,
          trigger: 'blur',
          message: '请输入退款原因！！！'
        }
      ]
    }
    const cancle = () => {
      emit('closeModal')
    }
    const confirm = () => {
      const {closeModal} = useModal.confirm({
        title: '确定确认退款吗?',
        icon: createVNode(ExclamationCircleOutlined),
        content: '退款金额将会原路返回到申请者账户。',
        onOk: async () => {
          let data = {
            number: props.number,
            status: 4
          }
          let res = await confirmRefund(data)
          if (res.success) {
            message.success('退款成功')
            data.visible1 = false
            cancle()
            closeModal()
          } else {
            message.error('退款失败')
          }
        },
      })
    }
    const reject = () => {
      data.visible1 = true
    }
    const handleOk = () => {
      data.visible1 = false
    }
    const rejectRefund = () => {
      formRef.value.validate().then(async () => {
        let obj = {
          content: form.reason,
          number: props.number,
          status: 7
        }
        let res = await manageRefund(obj)
        if (res.success) {
          data.visible1 = false
          message.success('拒绝退款成功')
          cancle()
        } else {
          message.error('操作失败')
        }
      })
    }
    initDetail()
    async function initDetail() {
      let res = await selectOneRefundOrder(props.number)
      if (res.success) {
        data.order = res.object
      }
    }
    onMounted(() => {})
    return {
      cancle,
      confirm,
      handleOk,
      rejectRefund,
      form,
      reject,
      formRef,
      ...toRefs(data),
      rules,
      modalVisible
    }
  }
}
</script>
